<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>块元素的盒子模型</title>
		<style type="text/css">
			/* 
			块元素宽度默认占满父元素的宽度，高度默认是内容的高度
			可以设置高宽，但还是会占满父元素的一行
			CSS的盒子模型有两种：IE 盒子模型、标准 W3C 盒子模型。IE的content部分包含border和padding
			标准 W3C 盒子实际大小：
			宽：padding-left + border-left + content-width(width) + border-right + padding-right
			高：padding-top + border-top + content-height(height) + border-bottom + padding-bottom
			IE 盒子实际大小：
			宽：content-width(width)
			高：content-height(height)
			
			一个盒子在其父盒子里，总是满足以下等式
			margin-left + padding-left + border-left + width + border-right + padding-right + margin-right = 父盒子内容区宽度
			为此如果等式不成立，浏览器会自动使其成立，称为过渡约束
			如果子盒子中是某些值是auto，那剩余的宽度则会自动的分给该值，如我们常用的居中手段：“margin: 0 auto;”
		*/
			.outer {
				/* 内容（content） */
				width: 200px;
				height: 200px;
				/* 内边距 */
				padding: 30px;
				/* 边框 */
				border: 5px solid #00aaff;
				/* 外边距 */
				margin: 10px;
			}

			.inner {
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div class="outer" style="background: #ffc5e4;">
			<div class="inner" style="background: #fdffc5;"></div>
		</div>
	</body>
</html>
